<template>
    <section class="bk-layout-custom-component-wrapper container-fbpldhco">
        <div class="bk-layout-component-fbpldhco block6f939">
            <!-- eslint-disable -->
            <!-- prettier-ignore -->
            <p title=""   class='bk-layout-component-fbpldhco paragraph7cd8c'>{{bbsTitle}}</p>
            <!-- eslint-enable -->
        </div>
        <!-- eslint-disable -->
        <!-- prettier-ignore -->
        <p title=""   class='bk-layout-component-fbpldhco paragraph74f59'>{{bbsContent}}</p>
        <!-- eslint-enable -->
        <bk-divider
            direction="horizontal"
            align="left"
            color="#dde4eb"
            class="bk-layout-component-fbpldhco divider2cd05">
            评论
        </bk-divider>
        <bk-input
            type="textarea"
            font-size="normal"
            :disabled="false"
            :readonly="false"
            :clearable="true"
            :show-controls="true"
            class="bk-layout-component-fbpldhco input411a0"
            v-model="comment">
        </bk-input>
        <bk-button
            title="hello world"
            size="normal"
            theme="primary"
            :disabled="false"
            :loading="false"
            class="bk-layout-component-fbpldhco button5e104"
            @click="addCommentData">
            提交评论
        </bk-button>
        <bk-dialog v-model="isShowEdit"
            theme="primary"
            :mask-close="false"
            title="回复评论"
            @confirm="addReply">
            <bk-input
                type="textarea"
                font-size="normal"
                :disabled="false"
                :readonly="false"
                :clearable="true"
                :show-controls="true"
                class="reply-input"
                v-model="replyContent">
            </bk-input>
        </bk-dialog>

        <div
            class="bk-free-layout-fbpldhco free-layout-e8176"
            v-for="(freeLayoutE8176Item, freeLayoutE8176Index) in commentList"
            :key="freeLayoutE8176Index">
            <div class="head-img"></div>
            <div class="main-view">
                <div class="main-view-top">
                    {{ freeLayoutE8176Item.createUser }}
                    <span class="top-time">{{ formatTime(freeLayoutE8176Item.createTime) }}</span>
                </div>
                <div class="main-view-bot">
                    <div class="bot-main">{{ freeLayoutE8176Item.comment }}</div>
                    <div class="bot-main-icon" @click="() => replyShow(freeLayoutE8176Item.id)">
                        <bk-icon class="icon-style" type="dialogue" />
                        {{ filterList(freeLayoutE8176Item.id).length > 0 ? filterList(freeLayoutE8176Item.id).length : '回复'}}</div>
                    <div class="reply-main" v-for="(reply, ind) in filterList(freeLayoutE8176Item.id)"
                        :key="ind">
                        <div class="head-img"></div>
                        <div class="main-view">
                            <div class="main-view-top">
                                {{ reply.createUser }}
                                <span class="top-time">{{ formatTime(reply.createTime) }}</span>
                            </div>
                            <div class="main-view-bot">
                                {{ reply.content }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    /**
     * 请先安装 bk-magic-vue 组件库、bkui-vue-complex 复合组件库
     * bk-magic-vue 组件库: https://magicbox.bk.tencent.com/static_api/v3/components_vue/2.0/example/index.html#/install
     * bkui-vue-complex 复合组件库: https://github.com/TencentBlueKing/lesscode-comp
     *
     * 如果页面使用了远程函数，单独使用本页面，需要确保项目 store 下有相应的方法，后端有相应的转发接口
     */

    import methodsMixin from '@/mixins/methods-mixin'
    export default {
        mixins: [methodsMixin],
        data () {
            function getInitVariableValue (defaultValue, defaultValueType) {
                let val = defaultValue.all
                if (defaultValueType === 1) val = defaultValue[window.BKPAAS_ENVIRONMENT]
                return val
            }
            return {
                bbsTitle: getInitVariableValue({ all: '', prod: '', stag: '' }, 0),
                bbsContent: getInitVariableValue({ all: '', prod: '', stag: '' }, 0),
                comment: getInitVariableValue({ all: '', prod: '', stag: '' }, 0),
                commentList: getInitVariableValue(
                    { all: [], prod: ['Jack', 'Lucy', 'Lily'], stag: ['Jack', 'Lucy', 'Lily'] },
                    0
                ),
                isShowEdit: getInitVariableValue({ all: false, prod: false, stag: false }, 0),
                replyContent: getInitVariableValue({ all: '', prod: '', stag: '' }, 0),
                currentId: getInitVariableValue({ all: '', prod: '', stag: '' }, 0),
                replyList: getInitVariableValue({ all: [], prod: [], stag: [] }, 0)
            }
        },

        created () {
            this.getData()
        },
        methods: {
            replyShow (id) {
                this.currentId = id
                this.isShowEdit = true
            },
            addReply () {
                this.$http.post('/data-source/user/tableName/reply', {
                    commentId: this.currentId,
                    content: this.replyContent
                }).then(res => {
                    // 可以在这里添加业务操作
                    this.getReplyList()
                    this.isShowEdit = false
                    return res
                }).catch((err) => {
                    console.log(err)
                })
            },
            getReplyList () {
                this.$http.get('/data-source/user/tableName/reply').then(res => {
                    // 可以在这里添加业务操作
                    this.replyList = res?.data?.list
                    return res
                }).catch((err) => {
                    console.log(err)
                })
            },
            filterList (id) {
                return this.replyList.filter(item => item.commentId === id)
            },
            formatTime (time) {
                return new Date(time).toLocaleString()
            }
        }
    }
</script>
<style lang="css" scoped>
    .container-fbpldhco {
        padding-left: 200px;
        padding-right: 200px;
        padding-top: 20px;
        padding-bottom: 0px;
        height: 100%;
    }
    .bk-layout-row-fbpldhco {
        display: flex;
    }
    .bk-layout-row-fbpldhco:after {
        display: block;
        clear: both;
        content: '';
        font-size: 0;
        height: 0;
        visibility: hidden;
    }
    .bk-layout-col-fbpldhco {
        float: left;
        position: relative;
        min-height: 1px;
    }
    .bk-free-layout-fbpldhco {
        height: 500px;
        width: 100%;
        display: inline-block;
        position: relative;
    }
    .bk-free-layout-item-inner-fbpldhco {
        height: 100%;
        position: relative;
    }
    .bk-form-radio {
        margin-right: 20px;
    }
    .bk-form-checkbox {
        margin-right: 20px;
    }
    .echarts {
        width: 100%;
        height: 100%;
    }
    /* 设置 bk-exception 组件宽度为 100% */
    .bk-exception-img {
        width: 100%;
    }
    .bk-form-item {
        margin: 10px;
    }
    .bk-sideslider {
        margin: 0;
    }
    /* 设置 .bk-form-control 组件宽度为 auto */
    .bk-form-control {
        width: auto;
    }
    .bk-form-control .bk-input-text {
        font-size: 12px;
    }
    [align-horizontal-left] > *,
    [align-horizontal-center] > *,
    [align-horizontal-right] > *,
    [align-horizontal-space-between] > *,
    [align-vertical-top] > *,
    [align-vertical-center] > *,
    [align-vertical-bottom] > * {
        flex-shrink: 0;
    }
    [align-horizontal-left],
    [align-horizontal-center],
    [align-horizontal-right],
    [align-horizontal-space-between] {
        display: flex !important;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    [align-horizontal-left] {
        justify-content: flex-start;
    }
    [align-horizontal-center] {
        justify-content: center;
    }
    [align-horizontal-right] {
        justify-content: flex-end;
    }
    [align-horizontal-space-between] {
        justify-content: space-between;
    }
    [align-vertical-top],
    [align-vertical-center],
    [align-vertical-bottom] {
        display: flex !important;
        flex-wrap: wrap;
    }
    [align-vertical-top] {
        align-items: flex-start;
    }
    [align-vertical-center] {
        align-items: center;
    }
    [align-vertical-bottom] {
        align-items: flex-end;
    }
    [absolute-align-horizontal-left] {
        left: 0 !important;
    }
    [absolute-align-horizontal-center] {
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    [absolute-align-horizontal-right] {
        left: unset !important;
        right: 0 !important;
    }
    [absolute-align-vertical-top] {
        top: 0 !important;
    }
    [absolute-align-vertical-center] {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    [absolute-align-vertical-bottom] {
        top: unset !important;
        bottom: 0 !important;
    }
    [absolute-align-horizontal-center][absolute-align-vertical-center] {
        transform: translate(-50%, -50%) !important;
    }

    .bk-layout-component-fbpldhco.block6f939 {
        display: block;
        width: 100%;
    }
    .bk-layout-component-fbpldhco.paragraph7cd8c {
        display: inline-block;
        width: 100%;
        height: 102px;
        text-align: center;
        font-size: 27px;
        white-space: pre-wrap;
        word-break: break-all;
        margin-left: 0;
        background-color: #ffffff;
    }
    .bk-layout-component-fbpldhco.paragraph74f59 {
        display: inline-block;
        width: 100%;
        height: 541px;
        text-align: left;
        font-size: 18px;
        white-space: pre-wrap;
        word-break: break-all;
        margin-top: 8px;
        margin-left: 0;
        background-color: #ffffff;
        text-indent: 2px;
        line-height: 16px;
    }
    .bk-layout-component-fbpldhco.divider2cd05 {
        display: block;
        margin-top: 8px;
    }
    .bk-layout-component-fbpldhco.input411a0 {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        margin-top: 8px;
        margin-left: 0;
    }
    .bk-layout-component-fbpldhco.button5e104 {
        display: inline-block;
        vertical-align: middle;
        margin-top: 8px;
    }
    .free-layout-e8176 {
      min-height: 74px;
      margin-top: 15px;
      background-color: #ffffff;
      padding: 20px;
      display: flex;
      align-content: center;
      justify-items: center;
    }
    .bk-layout-component-fbpldhco.text26799 {
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
    }
    .bk-layout-component-fbpldhco.textFca39 {
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
    }
    .bk-layout-component-fbpldhco.textE9080 {
        display: inline-block;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
    }
    .head-img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background:#eee;
    }
    .main-view {
      width: 100%;
      margin-left: 15px;
      padding: 5px;
    }
    .main-view-top {
      color: #252933;
      font-weight: 500;
      position: relative;
    }
    .top-time {
      font-size: 12px;
      color: #a6a9af;
      position: absolute;
      right: 20px;
    }
    .main-view-bot {
      margin-top: 10px;
      color: #8a919f;
      line-height: 25px;
    }
    .bot-main {
      margin-bottom: 10px;
    }

    .bot-main-icon {
      margin-bottom: 10px;
      cursor: pointer;
    }
    .bot-main-icon .icon-style{
      font-size: 16px !important;
      margin-right: 5px;
    }
    .reply-main {
      padding: 16px;
      background: rgba(247, 248, 250, 7);
      border-radius: 4px;
      display: flex;
    }
    .reply-input {
      width: 100%;
    }
</style>
